<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>赏心悦目的侧边导航栏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f8ff;
            /* 淡蓝色背景 */
        }

        ul {
            list-style: none;
        }

        nav {
            position: fixed;
            width: 300px;
            height: 98%;
            left: 6px;
            background-color: #e0ffff;
            /* 淡蓝色侧边栏 */
            border-radius: 20px 20px 20px 0px;
        }

        .menus {
            margin: 50px 0;
            color: #333;
        }

        .li {
            letter-spacing: 2px;
            font-size: 17px;
            font-weight: 600;
            padding: 16px 12px;
            box-sizing: border-box;
            transition: 0.3s;
        }

        .menus li:hover {
            background-color: #add8e6;
            /* 浅蓝色悬停效果 */
        }

        .li .fa {
            font-size: 20px;
            width: 50px;
            height: 20px;
            text-align: center;
            margin-left: 5px;
        }

        .li ul {
            border-radius: 20px;
            width: 0;
            height: 550px;
            padding: 50px 0;
            background-color: #b0e0e6;
            /* 浅青色子菜单背景 */
            position: absolute;
            top: 0;
            right: 0;
            overflow: hidden;
            transition: 0.3s;
            height: 100%;
        }

        .li ul li {
            padding: 16px 24px;
            white-space: nowrap;
            transition: 0.3s;
        }

        .li:hover ul {
            border-radius: 20px;
            width: 250px;
        }

        .li ul li:hover {
            background-color: #87cefa;
            /* 更深一点的蓝色 */
        }
    </style>
</head>

<body>
    <nav>
        <ul class="menus">
            <li class="li"> QQ <ul>
                    <li>QQ1号</li>
                    <li>QQ2号</li>
                    <li>QQ3号</li>
                    <li>QQ4号</li>
                    <li>QQ5号</li>
                    <li>QQ6号</li>
                    <li>QQ7号</li>
                </ul>
            </li>
            <li class="li"> 探探
                <ul>
                    <li>探探1号</li>
                    <li>探探2号</li>
                    <li>探探3号</li>
                    <li>探探4号</li>
                    <li>探探5号</li>
                    <li>探探6号</li>
                    <li>探探7号</li>
                    <li>探探8号</li>
                    <li>探探9号</li>
                    <li>探探10号</li>
                </ul>
            </li>
            <li class="li">推特<ul>
                    <li>推特1号</li>
                    <li>推特2号</li>
                    <li>推特3号</li>
                </ul>
            </li>
            <li class="li"> ins <ul>
                    <li>ins1号</li>
                    <li>ins2号</li>
                    <li>ins3号</li>
                    <li>ins4号</li>
                    <li>ins5号</li>
                </ul>
            </li>
            <li class="li"> 电报 <ul>
                    <li>电报1号</li>
                    <li>电报2号</li>
                    <li>电报3号</li>
                    <li>电报4号</li>
                    <li>电报5号</li>
                </ul>
            </li>
        </ul>
    </nav>
</body>

</html>